<template>
  <div class="main">
    <van-sticky>
      <div class="nav" v-if="!user">
        <img class="back" :src="back" alt="" @click="handleBack"/>
        <img class="share" :src="share" alt="" @click="handleShare"/>
      </div>
      <div class="navBar" v-if="user">
        <div class="navBar-left">
          <img :src="back" alt="" @click="handleBack" class="back">
          <div class="avatar" :style="{backgroundImage: `url(${personInfo.avatar ?  personInfo.avatar : logo})`}"></div>
          <!-- <van-image
              width="30"
              height="30"
              round
              style="border:1px solid #ffffff"
              :src="personInfo.avatar ?  personInfo.avatar : logo"
          /> -->
          <div style="font-size:16px;color:#fff">
            {{ personInfo.name }}

          </div>
        </div>
        <div class="nav-btn">

          <div class="add-friend" v-if="buttonStatus == 0" @click="addFriend">
            添加好友
            <div class="add-frient-num">{{ numberNewFans }}</div>
          </div>
          <div class="nav-btn-follow" v-if="buttonStatus == 1" @click="gotoGz">
            <van-icon name="plus"/>
            <span>关注</span>
          </div>

          <div class="nav-btn-followed" v-if="buttonStatus == 2" @click="gotoGz">
            <span>已关注</span>
          </div>
          <!--          <div class="add-friend" v-if="buttonStatus == 2">-->
          <!--            私信-->
          <!--          </div>-->
        </div>
      </div>
    </van-sticky>
    <div class="header" ref="user" v-loading="loading">
      <!-- <div class="avatar"  :style="{backgroundImage: `url(${personInfo.avatar ? store.state.imgUrl + personInfo.avatar : logo})`}">
      </div> -->
      <div class="avatar" :style="{backgroundImage: `url(${visitUserInfo.avatar ? store.state.imgUrl + visitUserInfo.avatar : logo})`}"></div>
      <!-- <el-image class="avatar"
                :src="visitUserInfo.avatar ? store.state.imgUrl + visitUserInfo.avatar : logo"></el-image> -->
      <div class="one">
        <div class="add-friend" v-if="buttonStatus == 0" @click="addFriend">
          添加好友
          <div class="add-frient-num">{{ numberNewFans }}</div>
        </div>
        <div class="add-friend" v-if="buttonStatus == 1" @click="gotoGz">
          <van-icon name="plus"/>
          <span>未关注</span>
        </div>
        <div class="add-friend ygz" v-if="buttonStatus == 2" @click="gotoGz">
          <span>已关注</span>
        </div>
        <!--        <div class="add-friend" v-if="buttonStatus == 2">-->
        <!--          私信-->
        <!--        </div>-->
      </div>
      <div class="two">
        <span class="name" @click="handleRemark"> {{ personInfo.note ? personInfo.note : personInfo.name }}</span>
        <van-tag v-if="(visitUserInfo.isAttention == 1 || visitUserInfo.isAttention == 2) && !isRemark" style="padding:3px" @click="handleRemark">设置备注
        </van-tag>
        <!-- <el-tag size="mini" type="info">设置备注</el-tag> -->
      </div>
      <div class="address">
        <span class="sex" v-if="personInfo.sex"><i style="font-size:15px"
                                                   :class="personInfo.sex ? ( personInfo.sex === '1' ? 'el-icon-male' : 'el-icon-female') : '' "
                                                   :style="personInfo.sex ? (personInfo.sex === '1' ?'color:#3588e5' : 'color:#ff0099') : ''"></i></span>
        <div class="ip">IP属地：{{ personInfo.ipProvince ? personInfo.ipProvince : '未知' }}</div>
      </div>
      <div class="three">
        <div class="three-item-all">
          <div class="three-item" v-for="(item,index) in threeList" :key="index">
            <div class="num">{{ item.num }}</div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="body" ref="comments">
      <!--      动态-->
      <div class="title">
        <span>动态</span>
        <div class="dhx"></div>
      </div>
      <!--      <div class="two-part-main">-->
      <!--        <div class="title"><span>08</span>9月·2023年</div>-->
      <!--        <div class="desc">今天也是美好的一天</div>-->
      <!--        <div class="image-list">-->
      <!--          <div class="item-list-item" v-for="(item,index) in articles.children.slice(0,3)" :key="index"-->
      <!--               :style="{backgroundImage: `url(http://debug.yasee.com.cn${item})`}"-->
      <!--               @click="handleImageClick(articles.children,index)">-->
      <!--            <div v-if="articles.children.length > 3 && index=== 2" class="more">-->
      <!--              +{{ articles.children.length > 3 ? articles.children.length - 3 : '' }}-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <ArticleList :article="obj" v-if="isGetVisitUser" :visit-user-info="visitUserInfo"
                   @fatherMethod="queryStatisticalInfo"></ArticleList>
    </div>
    <van-dialog class="dialog" v-model="showRemark" title="设置备注" :showConfirmButton="false">
      <div class="dialog_main">
        <div>
          <!-- <el-form  :rules="rules" ref="ruleForm"  class="demo-ruleForm">
            <el-form-item> -->
              <el-input  clearable size="big" v-model="remarkValue" placeholder="请输入备注"></el-input>
            <!-- </el-form-item>
          </el-form> -->
        </div>
        <div class="btn">
          <div class="btn_l" @click="ramarkCancel">取 消</div>
          <div class="btn_r" @click="remarkSure">确 定</div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import store from '@/store'
import {addAuthorLike} from '@/api/share.js'
import {ImagePreview} from "vant";
import ArticleList from "../components/articleList";
import {mapState} from "vuex";
import {queryStatisticalInfo, saveNote} from '@/api/my'
import {Dialog} from 'vant';

export default {
  name: "visitPersonal",
  components: {ArticleList},
  data() {
    return {
      isGetVisitUser: false,
      logo: require("@/assets/tx.png"),
      store: store,
      back: require("@/assets/search/back.png"),
      share: require("@/assets/my/share.png"),
      threeList: [
        {num: '', name: '获赞'},
        {num: '', name: '朋友'},
        {num: '', name: '关注'},
        {num: '', name: '粉丝'},
      ],
      visitUserInfo: {},
      obj:
          {name: '动态', id: 0},
      user: false,
      buttonStatus: 2,
      articles: {
        children: [
          "/admin/sys-file/yaseeoss/d1f6e128e5af4fee94bb41234e5b32dd.png",
          "/admin/sys-file/yaseeoss/d1f6e128e5af4fee94bb41234e5b32dd.png",
          "/admin/sys-file/yaseeoss/d1f6e128e5af4fee94bb41234e5b32dd.png",
          "/admin/sys-file/yaseeoss/d1f6e128e5af4fee94bb41234e5b32dd.png"]
      },
      showRemark: false,
      remarkValue: '',
      isRemark: '',
      loading: false,
      personInfo: [],
      pageName: ''
    }
  },
  computed: {
    ...mapState('my', ['userInfo']),
  },
  mounted() {
    this.visitUserInfo = JSON.parse(this.$route.query.obj)
    console.log(this.visitUserInfo,'11111111111111111111111111')
    this.pageName = this.$route.query.pageName
    if (this.pageName == 'chat' || this.pageName == 'shopChat') {
      this.visitUserInfo.isAttention = 1
    }
    console.log('pageName', this.pageName)
    console.log('visitUserInfo', this.visitUserInfo)
    this.isGetVisitUser = true
    this.queryStatisticalInfo()
    this.handleScrollx()
    window.addEventListener('scroll', this.handleScrollx, true)
  },
  beforeDestroy() {    //在加载时添加了scroll监听，如果不销毁，到下一个页面时，没有主动销毁，会报错'offsetTop' of undefined。因此，需要在页面跳转前销毁此监听
    window.removeEventListener("scroll", this.handleScrollx, true)
  },
  methods: {
    addFriend() {
      this.$router.push(
          {
            path: '/addFriend',
            query: {}
          }
      )
    },
    async gotoGz() {

      // if (this.buttonStatus == 1) {
      //   this.buttonStatus = 2
      // } else {
      //   this.buttonStatus = 1
      // }
      // // 点赞弹窗
      if (this.buttonStatus == 1) {
        this.buttonStatus = 2
        await this.getGz();
        this.$toast.success('关注成功')
        this.visitUserInfo.isAttention = 1
      } else {
        this.tipIsAttention()

      }
    },
    // 取消关注二次提示
    tipIsAttention() {
      Dialog.confirm({
        title: '提示',
        message: '您确定要取消关注该用户吗？',
        confirmButtonColor: 'rgba(242, 150, 0, 1)'
      }).then(() => {

        this.buttonStatus = 1
        this.$toast.success('取关成功')
        this.visitUserInfo.isAttention = 0

      }).catch(err => {

      })
    },
    getGz() {
      let data = {
        id: this.visitUserInfo.userId,
        type: 0,
      }
      addAuthorLike(data).then((res) => {
        if (res.code == 0) {
          console.log('关注成功')
        }
      })
    },
    queryStatisticalInfo() {
      let data = {}
      if (this.pageName == 'chat' || this.pageName == 'shopChat') {
        data = {
          isOneself: 1,
          authorId: this.visitUserInfo.targetId
        }
      } else {
        data = {
          isOneself: this.visitUserInfo.isOwn ? this.visitUserInfo.isOwn : this.visitUserInfo.isOneself,
          authorId: this.visitUserInfo.userId
        }
      }
      console.log('queryStatisticalInfo', data)
      this.loading = true
      queryStatisticalInfo(data).then(res => {
        console.log('获赞状态等', res.data)
        this.personInfo = res.data
        console.log(this.personInfo)
        this.isRemark = res.data.note//判断是否设置备注
        this.buttonStatus = res.data.buttonStatus
        this.numberNewFans = res.data.numberNewFans
        this.threeList.forEach((item, index) => {
          switch (item.name) {
            case '获赞':
              item.num = res.data.likes
              break
            case '朋友':
              item.num = res.data.friends
              break
            case '关注':
              item.num = res.data.focuses
              break
            case '粉丝':
              item.num = res.data.newFans
              break
          }
        })
      })
      this.loading = false
    },
    handleImageClick(item, index) {
      const imageUrls = item.map(image => `${this.$store.state.imgUrl}${image}`);
      console.log('imageAll', imageUrls)
      ImagePreview({
        images: imageUrls,
        startPosition: index,
        showIndicators: true,
        closeable: true
      });
    },
    handleScrollx() {//监听头部导航

      // const navBarTop = this.$refs.user.getBoundingClientRect().top
      if (this.$refs.user.getBoundingClientRect().top <= 45) {
        this.user = true
      } else {
        this.user = false
      }
      const commentSection = this.$refs.comments;
      const rect = commentSection.getBoundingClientRect();
      const windowHeight = window.innerHeight || document.documentElement.clientHeight;

      if (rect.bottom >= 0 && windowHeight - rect.top > 100) {
        this.commentShow = true
      } else {
        this.commentShow = false
      }
    },
    handleBack() {

      if (this.pageName == 'chat') {
        this.$router.push(({path: '/kzList'}))
      } else if (this.pageName == 'shopChat') {
        this.$router.push({path: '/shopList'})
      } else {
        this.$router.go(-1);
      }
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    handleShare() {

    },
    handleLike(id) {
      console.log('1111111111111')
      let data = {
        id: id,
        token: this.token
      }
      addAuthorLike(data).then((res) => {
        this.getDataList()
      })
    },
    handleRemark() {
      if (this.visitUserInfo.isAttention == 1 || this.visitUserInfo.isAttention == 2 ) {
        this.showRemark = true
        this.remarkValue = this.personInfo.note ? this.personInfo.note : this.personInfo.name
      }

    },
    ramarkCancel() {
      this.showRemark = false
    },
    remarkSure() {
      if (this.remarkValue) {
        // this.$toast(this.remarkValue)
        // this.showRemark = false
        if (this.remarkValue.length > 8  ) {
          this.$toast.fail('备注不能超过8个字符')
        } else{
           let data = {}
        if (this.pageName == 'chat' || this.pageName == 'shopChat') {
          data = {
            authorId: this.visitUserInfo.targetId,
            note: this.remarkValue
          }
        } else {
          data = {
            authorId: this.visitUserInfo.userId,
            note: this.remarkValue
          }
        }
        saveNote(data).then((res) => {
          this.$toast('修改备注成功')
          this.personInfo.name = this.personInfo.note = this.remarkValue
          this.showRemark = false
        })
        }
       
      } else {
        this.$toast('请输入备注名')
      }

    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  //background-image: url("../../assets/my/personal.png");
  background-image: url("../../../assets/my/personal.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #ffffff;
  overflow-y: scroll;

  //width: 100%;
  //height: 100vh;
  //display: flex;
  //flex-direction: column;

  .nav {
    padding: 0px 15px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .back {
      width: 10px;
      height: 16px;
    }

    .share {
      width: 22px;
      height: 22px;
    }
  }

  .navBar {
    height: 40px;
    background: #f29600;
    display: flex;
    padding: 2px 19px;
    align-items: center;
    justify-content: space-between;

    .navBar-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .avatar {
          border: 1px solid #ebeef5;
          background-size: 100%;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          opacity: 1;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover
      }
    }

    .van-image {
      margin: 0 10px;
    }

    .nav-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;

      .add-friend {
        width: 79px;
        height: 23px;
        opacity: 1;
        border-radius: 11.5px;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(242, 150, 0, 1);
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 21.72px;
        color: rgba(242, 150, 0, 1);
        text-align: center;
        vertical-align: top;
        position: relative;

        .add-frient-num {
          position: absolute;
          right: 3px;
          top: -10px;
          font-size: 11px;
          font-weight: 700;
          height: 13px;
          color: rgba(255, 255, 255, 1);
          width: 13px;
          opacity: 1;
          background: rgba(255, 66, 66, 1);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .nav-btn-follow {
        background: #fff;
        color: #f29600;
        border: 1px solid #fff;
        padding: 3px;
      }

      .nav-btn-followed {
        background: #f29600;
        color: #fff;
        border: 1px solid #fff;
        padding: 3px;
      }
    }
  }

  .header {
    //padding: 15px;
    margin: 20px 15px 0px 15px;
    // height: 159px;
    opacity: 1;
    border-radius: 13px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 10px 20px;

    .avatar {
      border: 1px solid #ebeef5;
      background-repeat: no-repeat;
      background-size: 100%;
      position: absolute;
      top: -20px;
      left: 10px;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #f0f0f0;
      opacity: 1;
      background-repeat: no-repeat;
          background-position: center;
          background-size: cover
      // background-color: blue;
      //background: url(https://img.js.design/assets/img/650130386283a11de27f9d72.png#38718863d694ca27a56c171da507ec69);
    }

    .one {
      display: flex;
      justify-content: flex-end;

      .add-friend {
        width: 79px;
        height: 23px;
        opacity: 1;
        border-radius: 11.5px;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(242, 150, 0, 1);
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 21.72px;
        color: rgba(242, 150, 0, 1);
        text-align: center;
        vertical-align: top;
        position: relative;

        .add-frient-num {
          position: absolute;
          right: 3px;
          top: -10px;
          font-size: 11px;
          font-weight: 700;
          height: 13px;
          color: rgba(255, 255, 255, 1);
          width: 13px;
          opacity: 1;
          background: rgba(255, 66, 66, 1);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .ygz {
        color: rgba(255, 255, 255, 1);
        background: rgba(242, 150, 0, 1);
      }
    }

    .two {
      display: flex;
      align-items: center;

      .name {
        // width: 200px;
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 28.96px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
        margin-right: 5px;
      }


    }

    .address {
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24px;
      color: rgba(255, 255, 255, 1);
      text-align: left;
      vertical-align: top;
      display: flex;
      align-items: center;

      .sex {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ccc6;
        border-radius: 5px;
        height: 20px;
        width: 20px;
        margin-right: 5px;
      }

      .ip {
        // margin-left: 13px;
        background-image: url("../../../assets/my/name_back.png");
        background-size: 100%;
        background-repeat: no-repeat;
        font-size: 12px;
        font-weight: 400;
        width: 101px;
        color: rgba(128, 128, 128, 1);
        text-align: left;
        height: 13px;
        line-height: 13px;
        vertical-align: top;
      }
    }


    .three {
      padding-top: 33px;
      //height: 75px;
      opacity: 1;
      border-radius: 13px;
      background: rgba(255, 255, 255, 1);

      .three-item-all {
        display: flex;
        align-items: center;
        //height: 75px;

        .three-item {
          padding: 0px 8px;
          //border-right: 1px dashed rgba(128, 128, 128, 1);
          width: calc((100% - 48px) / 4);
          text-align: center;

          .num {
            font-size: 24px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 25.13px;
            color: rgba(48, 48, 48, 1);
            //text-align: left;
            vertical-align: top;
          }

          .name {
            margin-top: 4px;
            font-size: 14px;
            font-weight: 400;
            line-height: 20.27px;
            color: rgba(189, 189, 189, 1);
            vertical-align: top;
          }
        }
      }
    }
  }

  .body {
    padding: 15px;

    .title {
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 28.96px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;

      .dhx {
        margin-left: 10px;
        width: 21px;
        height: 2px;
        text-align: center;
        opacity: 1;
        border-radius: 1px;
        background: rgba(255, 141, 26, 1);
      }
    }

    .two-part-main {
      //padding: 10px 10px 0 10px;
      position: relative;

      .title {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 17.38px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
        padding-top: 10px;

        > span {
          font-size: 23px;
          font-weight: 500;
          line-height: 33.3px;
          color: rgba(0, 0, 0, 1);
          text-align: left;
        }
      }

      .desc {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24.62px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        vertical-align: top;
      }

      .image-list {
        padding: 15px 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        .item-list-item:nth-of-type(3n + 0) {
          margin-right: 0;
        }

        .item-list-item {
          width: calc((100% - 14px) / 3);
          height: 114px;
          border-radius: 5px;
          margin-right: 7px;
          position: relative;
          background-size: 100% 100%;


          .more {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 36px;
            height: 26px;
            opacity: 1;
            border-radius: 5px 0px 5px 0px;
            background: rgba(0, 0, 0, 0.47);
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0.5px;
            line-height: 26px;
            color: rgba(255, 255, 255, 1);
            text-align: center;
          }
        }
      }
    }

    .content {
      padding-top: 16px;

    }
  }

  .dialog {
    height: 200px;
    background: linear-gradient(180deg, rgb(240 202 140) 0%, rgba(255, 255, 255, 1) 40%);
    font-size: 20px;

    .dialog_main {
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .btn {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;

      .btn_l {
        border: 1px solid #f29600;
        border-radius: 20px;
        color: #f29600;
        padding: 8px 30px;

      }

      .btn_r {
        background: #f29600;
        border: 1px solid #f29600;
        border-radius: 20px;
        color: #fff;
        padding: 8px 30px;
      }
    }
  }
}
</style>